<template>
  <div class="myBox">
    <div class="top" v-if="isLogin">
      <div class="touxiang">
        <van-image
          round
          fit="cover"
          width="70px"
          height="70px"
          :src="userInfo.headimgurl"
        />
      </div>
      <div class="nickname">{{ userInfo.wxName }}</div>
      <div class="email">{{ userInfo.remark }}</div>
    </div>
    <div class="top" v-else @click="toLogin">
      <div class="touxiang">
        <van-image
          round
          fit="cover"
          width="70px"
          height="70px"
          src="../assets/img/default_tx.png"
        />
      </div>
      <div class="nickname">未登录</div>
    </div>
    <!--    -->
    <div class="myicons">
      <div class="myicon" @click="toPayList(0)">
        <van-icon name="certificate" />
        <span>待支付</span>
      </div>
      <div class="myicon" @click="toPayList(1)">
        <van-icon name="cash-back-record" />
        <span>已支付</span>
      </div>
    </div>
    <!--    -->
    <div class="cells">
      <van-cell-group>
        <van-cell title="版本信息" value="1.0.1"/>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import {wxcallback, getweixinCode} from '../assets/js/func.js'

export default {
  name: 'My',
  data () {
    return {
      isLogin:false,
      userInfo: {}
    }
  },
  created () {
    this.reload()
    wxcallback(()=>{this.reload()})
  },
  methods: {
    toPayList (index) {
      if (!localStorage.getItem('openId')) {
        getweixinCode()
      } else {
        this.$router.push('/PayInfoList?index=' + index)
      }
    },
    //点击登录授权
    toLogin(){
      getweixinCode()
    },
    reload(){
        this.isLogin = localStorage.getItem('openId') ? true : false
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
    }
  }
}
</script>

<style lang="less" scoped>
.myBox {
  background-color: #f4f5f6;
  height: 100vh;
  padding-bottom: 50px;

  .top {
    padding: 30px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;

    .nickname {
      font-size: 16px;
      padding: 8px 0;
    }
  }
}

.myicons {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  margin-top: 10px;
  background-color: #ffffff;

  .myicon {
    display: flex;
    align-items: center;
    .van-icon {
      font-size: 30px;
      color: #ff6400;
    }
    span {
      color: #999;
      margin-left: 5px;
    }
  }
}

.cells {
  margin-top: 10px;
}
</style>
